@import "../common/variables.scss";
@import "../common/mixins.scss";

.#{$css-prefix} {
    &-navbar {
        height: $navbar-height;
        position: relative;
        display: flex;
        z-index: 5;

        &-fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: $base-zindex * 100;
        }

        &-item {
            flex: 0 0 (100% - $navbar-center-width) / 2;
            font-size: $navbar-item-fontsize;
            white-space: nowrap;
            overflow: hidden;
            display: flex;
            align-items: center;
            color: inherit;

            &:first-child {
                order: 1;
                margin-right: -(100% - $navbar-center-width) / 2;
            }

            &:last-child {
                order: 3;
                justify-content: flex-end;

                >a {
                    justify-content: flex-end;
                }
            }

            >a {
                display: flex;
                align-items: center;
                height: $navbar-height;
                min-width: (100% - $navbar-center-width) / 2;
                /* for low version android */
                flex: 1;
            }
        }

        &-center-box {
            order: 2;
            height: $navbar-height;
            width: $navbar-center-width;
            margin-left: (100% - $navbar-center-width) / 2;
        }

        &-center {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: inherit;

            &-title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            img {
                height: 60%;
            }
        }
    }

}